<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/study.css">

    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/footer.js"></script>
    <title>学习中心</title>
    <script>
        $(function() {
            $(".empty").hover(function() {
                $(this).css("opacity", 1);
            }, function() {
                $(this).css("opacity", 0);
            });
        })
    </script>
</head>

<body>
    <!-- header模块 -->
    <div class="header">
        <div class="w">
            <div class="logo fl">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <ul class="fl">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li class="active">
                    <a href="study.html">学习中心</a>
                </li>
                <li>
                    <a href="news.html">校园资讯</a>
                </li>
                <li>
                    <a href="personal-course.html">个人中心</a>
                </li>
                <li>
                    <a href="message.html">留言</a>
                </li>
            </ul>
            <!-- 搜索框 -->
            <div class="input-search fl">
                <input type="search" class="search" id="search" placeholder="搜索你感兴趣的课程...">
                <span class="glyphicon glyphicon-search"></span>
            </div>
            <!-- 登录注册按钮 -->
            <div class="fl">
                <a href="javascript:;" class="login">登录/注册</a>
            </div>
        </div>
    </div>
    <!-- 小轮播图 -->
    <div class="focus">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides  轮播图照片 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active banner1">
                    <img src="images/student-banner3.png" alt="...">
                </div>
                <div class="item banner2">
                    <img src="images/student-banner2.png" alt="...">
                </div>
                <div class="item banner3">
                    <img src="images/student-banner1.png" alt="...">
                </div>
            </div>
        </div>
    </div>
    <!-- 分类筛选模块 -->
    <div class="classify">
        <div class="w">
            <ul>
                <li>
                    <h4>课程性质：</h4>
                    <h4><a href="javascript:;">全部</a></h4>
                    <a href="javascript:;" class="active">公共必修课</a>
                    <a href="javascript:;">公共选修课</a>
                    <a href="javascript:;">专业核心课程</a>
                    <a href="javascript:;">专业基础课程</a>
                    <a href="javascript:;">专业核心课</a>
                    <a href="javascript:;">专业拓展课程</a>
                    <a href="javascript:;">通识教育课程</a>
                    <a href="javascript:;">综合实践课程</a>
                    <a href="javascript:;">其他</a>
                </li>
                <li>
                    <h4>所属类别：</h4>
                    <h4><a href="javascript:;" class="active">全部</a></h4>
                    <a href="javascript:;">大数据</a>
                    <a href="javascript:;">云计算</a>
                    <a href="javascript:;">区块链</a>
                    <a href="javascript:;">人工智能</a>
                    <a href="javascript:;">全栈开发</a>
                    <a href="javascript:;">算法进阶</a>
                </li>
                <li>
                    <h4>难度等级：</h4>
                    <h4><a href="javascript:;" class="active">全部</a></h4>
                    <a href="javascript:;">初级</a>
                    <a href="javascript:;">中级</a>
                    <a href="javascript:;">高级</a>
                    <a href="javascript:;">进阶</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="goods">
        <div class="w">
            <!-- 精品推荐模块 -->
            <div class="box fl">
                <div class="box-hd">
                    <ul class="nav nav-pills fl">
                        <li role="presentation" class="active"><a href="javascript:;">推荐</a></li>
                        <li role="presentation"><a href="javascript:;">最新</a></li>
                        <li role="presentation"><a href="javascript:;">热评</a></li>
                        <li role="presentation">
                            <a href="javascript:;">学习人数</a>
                            <span class="glyphicon glyphicon-triangle-top box-hd-top"></span> <span class="glyphicon glyphicon-triangle-bottom box-hd-bottom"></span>
                        </li>
                    </ul>
                    <div class="box-hd-page fr">
                        <span><</span>
                        <i> 1 / 28</i>
                        <span>></span>
                    </div>
                </div>
                <div class="box-bd" style="clear:both;">
                    <ul class="clearfix">
                        <li>
                            <em class="hide-pic"><img src="images/hot.png" alt=""></em>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course1.jpg" alt="" class="hide-pic">
                            <a href="study-detail.html">
                                <h4>
                                    大学生创业导论
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <em class="hide-pic"><img src="images/hot.png" alt=""></em>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course2.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    常见病的健康管理
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <em class="hide-pic"><img src="images/hot.png" alt=""></em>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course4.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    创业创新执行力
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <em class="hide-pic"><img src="images/hot.png" alt=""></em>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course3.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    大学启示录：如何读大学？
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course4.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    大学生爱情兵法
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course3.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    公共关系礼仪实务
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course1.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    大学生国家安全教育
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                        <li>
                            <div class="empty">
                                <img src="images/video.png" alt="" class="show-video">
                            </div>
                            <img src="images/course2.jpg" alt="" class="hide-pic">
                            <a href="javascript:;">
                                <h4>
                                    大学生防艾健康教育
                                </h4>
                            </a>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 精品TOP榜 -->
            <div class="fr right-box">
                <h1><span><img src="images/NO1.png" alt=""></span> 精品TOP榜</h1>
                <div class="right-box-top">
                    <img src="images/student-bg1.png" alt="">
                </div>
                <ul>
                    <li>
                        <div class="right-box-bd">
                            <div class="front">
                                <h1>公共关系礼仪实务</h1>
                                <span><em>高级</em> • 1125人在学习</span>
                            </div>
                            <div class="bottom"> &nbsp;&nbsp;20世纪80年代以来，公共关系在中国有了长足发展，公共关系在组织形象塑造与传播...</div>
                        </div>
                    </li>
                    <li>
                        <div class="right-box-bd">
                            <div class="front">
                                <h1>大学生国家安全教育</h1>
                                <span><em>高级</em> • 1125人在学习</span>
                            </div>
                            <div class="bottom"> &nbsp;&nbsp;本课程以总体国家安全观为主线，全面介绍国家安全战略、国家安全管理和国家安全法治等内容，向大学生展现...</div>
                        </div>
                    </li>
                    <li>
                        <div class="right-box-bd">
                            <div class="front">
                                <h1>大学生防艾健康教育</h1>
                                <span><em>高级</em> • 1125人在学习</span>
                            </div>
                            <div class="bottom">&nbsp;&nbsp; 本课程在普及艾滋病防治知识的基础上，从大学生性健康教育着眼，以大学生喜闻乐见的形式，引导学生在性道德...</div>
                        </div>
                    </li>
                    <li>
                        <div class="right-box-bd">
                            <div class="front">
                                <h1>大学生创业导论</h1>
                                <span><em>高级</em> • 1125人在学习</span>
                            </div>
                            <div class="bottom">&nbsp;&nbsp; 本课程重点放在对学生创业素质的培养和创业基础知识的介绍，同时指导学生以团队形式开展一些项目化的实践训练...</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- footer模块 -->
    <div class="footer">
        <div class="w">
            <div class="top">
                <div class="fl">
                    <div class="logo">
                        <a href="index.html"><img src="images/logo.png" alt=""></a>
                    </div>
                    <h5>用户在高强度、压抑的学习中，可以分享学习成果，记录心情!</h5>
                </div>
                <div class="fl">
                    <ul>
                        <li>
                            <h3>关于我们</h3>
                            <a href="#">集团概况</a>
                            <a href="#">集团部门</a>
                            <a href="#">发展历史</a>
                            <a href="#">法律条款</a>
                        </li>
                        <li>
                            <h3>联系我们</h3>
                            <a href="#">常见问题</a>
                            <a href="#">意见反馈</a>
                            <a href="#">资讯投稿</a>
                            <a href="#">加入我们</a>
                        </li>
                        <li>
                            <h3>关注我们</h3>
                            <div class="wechat">
                                <img src="images/wechat.png" alt="" id="wechat">
                            </div>
                            <div class="weibo">
                                <img src="images/weibo.png" alt="" id="weibo">
                            </div>
                        </li>
                        <li style="margin-right:0;">
                            <h3>友情链接</h3>
                            <a href="#">Study课堂</a>
                            <a href="#">Study集团</a>
                            <a href="#">Study</a>
                        </li>
                    </ul>
                </div>
                <div class="code" id="code">
                    <img src="images/code.png" alt="">
                </div>
                <span class="angle" id="angle"></span>
            </div>
            <div class="bottom">
                <div>
                    广西来宾市兴宾区铁北大道966号 邮编:123456 Email:abcdefg@xxx.edu.cn <br>
                </div>
                <div>
                    <a href="#"> 桂ICP备123456789号 </a> 版权所有 © 广西科技师范学院
                </div>

                <div style="margin-bottom:0;">
                    桂公网安备 1234567890号
                </div>
            </div>
        </div>
    </div>
</body>

</html>